<template>
  <div class="project-list">
    <div class="search">
      <div class="box1">
        <div class="lf">项目状态：未开始</div>
        <div class="rh"></div>
      </div>
      <div class="box1">
        <div class="lf">项目状态：未开始</div>
        <div class="rh"></div>
      </div>
      <div class="box1">
        <div class="lf">项目状态：未开始</div>
        <div class="rh"></div>
      </div>
      <div class="box1">
        <div class="lf">项目状态：未开始</div>
        <div class="rh"></div>
      </div>
      <button>查询</button>
    </div>
    <div class="table">
      <template>
        <el-table :data="tableData" style="width: 1849px">
          <el-table-column label="项目名称" width="256" fixed>
            <template slot-scope="scope">
              <div class="col1" v-on:click="toDetail(scope.row.projectType)">
                <img :src="scope.row.projectPic" width="50" height="50" />
                <div class="dec1">
                  <p>{{ scope.row.projeceName }}</p>
                  <span>{{ scope.row.projectType }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目负责人" width="135">
            <template slot-scope="scope">
              <p
                style="
                  margin: 0;
                  font-size: 14px;
                  font-weight: 400;
                  color: #555555;
                "
              >
                {{ scope.row.directorIdentity }}
              </p>

              <img
                style="width: 56px; height: 56px:"
                :src="scope.row.projectPic"
              />
              <p
                style="
                  margin: 0;
                  font-size: 14px;
                  font-weight: 400;
                  color: #111111;
                "
              >
                {{ scope.row.directorName }}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="项目成员" width="396">
            <template slot-scope="scope">
              <div class="col3">
                <div
                  class="item"
                  v-for="item in scope.row.teamMember"
                  :key="item.index"
                >
                  <p>{{ scope.row.teamMember[0].memberIdentity }}</p>

                  <img
                    style="display: inline-block"
                    :src="scope.row.teamMember[0].memberAvatar"
                  />
                  <p>{{ scope.row.teamMember[0].memberName }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="我的角色" width="121">
            <template slot-scope="scope">
              {{ scope.row.directorIdentity }}
            </template>
          </el-table-column>
          <el-table-column label="项目组名称" width="132">
            <template slot-scope="scope">
              {{ scope.row.teamName }}
            </template>
          </el-table-column>
          <el-table-column label="项目等级" width="112">
            <template slot-scope="scope">
              {{ scope.row.projectLevel }}
            </template>
          </el-table-column>
          <el-table-column label="开始时间" width="130">
            <template slot-scope="scope">
              {{ scope.row.startTime }}
            </template>
          </el-table-column>
          <el-table-column label="结束时间" width="130">
            <template slot-scope="scope">
              {{ scope.row.endTime }}
            </template>
          </el-table-column>
          <el-table-column label="进度" width="181">
            <template slot-scope="scope">
              <div class="domany">
                <span
                  class="many"
                  :style="{ width: scope.row.rateOfProgress + '%' }"
                  >{{ scope.row.rateOfProgress }}%</span
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column label="过期（天）" width="112">
            <template slot-scope="scope">
              {{ scope.row.outTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="144" fixed="right">
            <button class="tabBtn1"></button>
            <button class="tabBtn2"></button>
            <button class="tabBtn3"></button>
          </el-table-column>
        </el-table>
        <div style="text-align: center" class="pagbox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="20"
            :page-size="5"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'projectList',
  data() {
    return {
      tableData: [{
        projectPic: '/static/img/avatar.15eb5b5.png',
        projeceName: '项目标题一项目标题项目标题一项目标题',
        projectType: '瀑布式协作项目',
        directorName: '王小虎',
        directorIdentity: '组员',
        directorAvatar: '/static/img/avatar.15eb5b5.png',
        teamMember: [{
          memberName: '1',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: '项目助理'
        },
        {
          memberName: '2',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: '组员'
        },
        {
          memberName: '3',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: '组员'
        },
        {
          memberName: '4',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: '组员'
        }],
        teamName: '软件三组',
        projectLevel: '1',
        startTime: '2022–02-07',
        endTime: '2022–02-28',
        rateOfProgress: 80,
        outTime: '5天'
      }, {
        projectPic: '/static/img/avatar.15eb5b5.png',
        projeceName: '项目标题一项目标题项目标题一项目标题',
        projectType: '敏捷式协作项目',
        directorName: '王小虎',
        directorIdentity: '组员',
        directorAvatar: '/static/img/avatar.15eb5b5.png',
        teamMember: [{
          memberName: '1',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '2',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '3',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '4',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        }],
        teamName: '软件三组',
        projectLevel: '1',
        startTime: '2022–02-07',
        endTime: '2022–02-28',
        rateOfProgress: 100,
        outTime: '5天'
      }, {
        projectPic: '/static/img/avatar.15eb5b5.png',
        projeceName: '项目标题一项目标题项目标题一项目标题',
        projectType: '瀑布式协作项目',
        directorName: '王小虎',
        directorIdentity: '组员',
        directorAvatar: '/static/img/avatar.15eb5b5.png',
        teamMember: [{
          memberName: '1',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '2',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '3',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '4',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        }],
        teamName: '软件三组',
        projectLevel: '1',
        startTime: '2022–02-07',
        endTime: '2022–02-28',
        rateOfProgress: 100,
        outTime: '5天'
      }, {
        projectPic: '/static/img/avatar.15eb5b5.png',
        projeceName: '项目标题一项目标题项目标题一项目标题',
        projectType: '瀑布式协作项目',
        directorName: '王小虎',
        directorIdentity: '组员',
        directorAvatar: '/static/img/avatar.15eb5b5.png',
        teamMember: [{
          memberName: '1',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '2',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '3',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '4',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        }],
        teamName: '软件三组',
        projectLevel: '1',
        startTime: '2022–02-07',
        endTime: '2022–02-28',
        rateOfProgress: 100,
        outTime: '5天'
      }, {
        projectPic: '/static/img/avatar.15eb5b5.png',
        projeceName: '项目标题一项目标题项目标题一项目标题',
        projectType: '瀑布式协作项目',
        directorName: '王小虎',
        directorIdentity: '组员',
        directorAvatar: '/static/img/avatar.15eb5b5.png',
        teamMember: [{
          memberName: '1',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '2',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '3',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        },
        {
          memberName: '4',
          memberAvatar: '/static/img/avatar.15eb5b5.png',
          memberIdentity: ''
        }],
        teamName: '软件三组',
        projectLevel: '1',
        startTime: '2022–02-07',
        endTime: '2022–02-28',
        rateOfProgress: 100,
        outTime: '5天'
      }]
    };
  },
  methods: {
    toDetail(pagename) {
      console.log(pagename);
      if (pagename === '瀑布式协作项目') {
        this.$refs.comName = 'projectdetail';
      }
    }
  }
};
</script>

<style lang="less" >
// 第一列样式
.col1 {
  width: 237px;
  height: 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .dec1 {
    margin-right: 10px;
  }
  p {
    width: 167px;
    margin: 0;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 14px;
    text-align: left;
  }
  span {
    display: block;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #555555;
    line-height: 17px;
    margin-top: 4px;
    text-align: left;
  }
}

// 第三列样式
.col3 {
  width: 237px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    img {
      width: 56px;
      height: 56px;
    }
  }
  p {
    width: 56px;
    margin: 0;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #111111;
    line-height: 14px;
    text-align: center;
  }
}
</style>

<style lang="less" scoped>
.project-list {
  width: 1880px;
  height: 820px;
  margin: 0 auto;
  .search {
    width: 937px;
    height: 40px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .box1 {
      width: 177px;
      height: 38px;
      background: #ffffff;
      border-radius: 3px;
      border: 1px solid #ccd9f9;
      display: flex;
      .lf {
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 38px;
        text-align: center;
      }
      .rh {
        width: 39px;
        height: 38px;
        border-left: 1px solid #ccd9f9;
        background: url("~@/assets/triangle.png") no-repeat center center;
        background-size: 12px 21px;
      }
    }
    button {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 40px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .table {
    width: 1880px;
    height: 782px;
    background: #ffffff;
    box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
    .el-table {
      margin: 0 auto;
    }
    /deep/.el-table td,
    .el-table th {
      text-align: center;
      padding: 18px 0px;
    }

    /deep/ .el-table th {
      height: 62px;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #111111;
      line-height: 14px;
    }
  }
}
img {
  border-radius: 50%;
  box-shadow: 1px 1px 3px #888888;
}
button {
  display: inline-block;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}
.tabBtn1 {
  background: url("~@/assets/tabBtn1.png") no-repeat center center;

  background-size: 100% 100%;
}
.tabBtn2 {
  background: url("~@/assets/tabBtn2.png") no-repeat center center;

  background-size: 100% 100%;
}
.tabBtn3 {
  background: url("~@/assets/tabBtn3.png") no-repeat center center;

  background-size: 100% 100%;
}
.el-pagination {
  margin: 20px auto;
  padding-bottom: 20px;
  /deep/.btn-prev {
    width: 32px;
    height: 32px;
    background-color: #faf9ff;
  }
  /deep/.btn-next {
    width: 32px;
    height: 32px;
    background-color: #faf9ff;
  }
}
/deep/.el-icon-arrow-left:before {
  font-size: 20px;
  color: #555555;
}
/deep/.el-icon-arrow-right:before {
  font-size: 20px;
  color: #555555;
}
/deep/.el-pager li {
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 32px;
  border-radius: 50% !important;
  background-color: #faf9ff !important;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
  color: #ffffff !important;
  box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
}
.domany {
  border: 1px solid #6c59cc;
  width: 150px;
  height: 30px;
  border-radius: 16px;
  margin: 0 10px;
  padding: 4px;
  text-align: left;
  .many {
    display: inline-block;
    height: 100%;
    background-image: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
    border-radius: 12px;
    text-align: center;
    color: white;
    line-height: 24px;
    font-size: 12px;
    color: #ffffff;
  }
}
// display: flex;
// justify-content: center;
// align-items: center;

.el-progress {
  width: 96%;
  margin-left: 1.5%;
  // margin: 0 auto;
  // margin-top: 3px;
  // /deep/.el-progress-bar {
  //   padding-right: 0;
  // }
  /deep/.el-progress-bar__inner {
    background: linear-gradient(270deg, #1160cf 0%, #cd06bf 100%);
  }
  /deep/.el-progress-bar__outer {
    background: none;
  }
  /deep/.el-progress-bar__innerText {
    font-size: 12px;
    font-family: DINAlternate-Bold !important;
    color: #ffffff;
    margin-bottom: 3px;
  }
}
</style>
